<template>
  <div>
    <el-card>
      <div class="box">
        <img :src="userStore.avatar" alt="" class="avatar">
        <div>
          <h2>{{ getTime() }}好！{{ userStore.username }}</h2>
          <p>{{ setting.title }}</p>
        </div>
      </div>
    </el-card>
    <div class="icon">
      <svg-icon name="welcome" width="500px" height="400px"></svg-icon>
    </div>
  </div>
</template>

<script setup lang='ts'>
// 引入组合式API函数之生命周期函数
import { onMounted } from 'vue';
// 获取仓库对象
import useUserStore from '@/store/modules/user';
import { getTime } from '@/utils/time';
import setting from '@/setting';
let userStore = useUserStore()
// 目前挂载完毕发送请求获取用户信息
onMounted(() => {
  userStore.userInfo()
})
</script>

<style scoped>
.box {
  display: flex;

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  h2 {
    margin-top: 10px;
    margin-left: 20px;
    font-size: 30px;
  }

  p {
    margin-left: 20px;
    margin-top: 20px;
    color: skyblue;
  }
}
.icon{
  display: flex;
  justify-content: center;
}
</style>